<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
    <head>
        <meta charset="utf-8"> 
        <title>产品详情</title>
        <link th:href="@{~/css/styles.css}" rel="stylesheet" />
        <link rel="stylesheet" th:href="@{~/css/innerstyle.css}">
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	    <link rel="stylesheet" type="text/css" th:href="@{~/DataTables/datatables.min.css}"/>
        <script type="text/javascript" th:src="@{~/DataTables/datatables.min.js}"></script>
        <script>
            function formSubmit() {
                if(confirm("确定修改")){
                    $.ajax({
                        //几个参数需要注意一下
                        type: "POST",//方法类型
                        dataType: "json",//预期服务器返回的数据类型
                        url: "/product/modify" ,//url
                        data: $('#productForm').serialize(),
                        success: function (data) {
                            if (data.statue== "0") {
                                alert("修改成功！");
                                window.location="/product/list";
                            }else if (data.statue=="1"){
                                alert(data.mes);
                            }
                            else{
                                alert("修改失败...");
                            }
                        },
                        error : function() {
                            alert("发送异常")
                        }
                    });
                }
            }
        </script>
    </head>
    <body class="sb-nav-fixed">
    <div th:replace="bar::topbar"></div>
    <div id="layoutSidenav">
        <div th:replace="bar::#layoutSidenav_nav"></div>
        <div id="layoutSidenav_content">
    <div class="mainborder">

        <h1>产品详情</h1>

        <form role="form" id="productForm">
            <div class="form-group">
                <label ><span style="color: red;">*</span>产品名称</label>
                <input class="form-control" id="productName" name="productName" type="text" placeholder="产品名称" th:value="${product.productName}">
            </div>
            <div class="form-group">
                <label >产品编号</label>
                <input class="form-control" type="text" placeholder="产品编号" disabled th:value="${product.productId}">
                <input name = "productId" style="display: none" th:value="${product.productId}">
            </div>
            <div class="form-group">
                <label >开发时间</label>
                <input class="form-control"  type="text"  placeholder="开发时间" disabled th:value="${#dates.format(product.createdDate,'yyyy/MM/dd')}">
            </div>
            <div id="form-group" >
                <label >产品工艺</label>
                <table id="myTable" class="table table-bordered">
                    <thead>
                        <tr>
                            <th>工艺序号</th>
                            <th>工艺名称</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="design:${designs}">
                            <td>1</td>
                            <td th:text="${design.processName}"></td>
                        </tr>

    
                    </tbody>
                </table>
            </div>
            <button shiro:hasPermission="user:admin" type="button" onclick="formSubmit()" class="btn btn-danger" style="float: right;">提交</button>
        </form>


    </div>
        </div>
    </div>
    
    <script>
        $(document).ready( function () {
            $('#myTable').DataTable({
                "bFilter": false,
                "bLengthChange": false,
                "oLanguage": {
                    "sProcessing": "正在加载中......",
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sZeroRecords": "对不起，查询不到相关数据！",
                    "sEmptyTable": "表中无数据存在！",
                    "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                    "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
                    "sSearch": "搜索",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上一页",
                        "sNext": "下一页",
                        "sLast": "末页"
                    }
                }
            });
        } );

        
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <script th:src="@{~/js/scripts.js}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
    <script th:src="@{~/assets/demo/chart-area-demo.js}"></script>
    <script th:src="@{~/assets/demo/chart-bar-demo.js}"></script>
    <script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" crossorigin="anonymous"></script>
    <script th:src="@{~/js/datatables-simple-demo.js}"></script>
</body>
</html>
